<!--本文件由FirstUI授权予关赛川（手机号： 1 5  60  05 1  520 5，身份证尾号：22 6  5 1 9）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
<template>
	<view class="foodList">
		<!-- 搜索栏 -->
		<view class="searchHeader padding25" >
			<fui-search-bar  @search="goSearch"  class='fuiSearch' :paddingLr="0" radius='36' inputBackground="rgba(224, 224, 224, 0.3)"
			 background="rgba(0,0,0,0)" :showLabel='false' cancelColor='#e2e2e2' searchColor='#e2e2e2' placeholder='搜索店铺'></fui-search-bar>
		</view>
		<view class="b-line panel-content" @click="positionA">
			<view class="flex-box">
				<view class="flex-name">
					<view class="" v-if="address">
						{{address}}
					</view>
					<view class="add-name" v-else>
						微山岛
					</view>
					<image class="flex-jiant" :src="baseOssUrl+'icon/rightJt.png'" mode=""></image>
				</view>
				<!--  @click="getMeth" -->
				<view class="flex-wz">
					当前位置
					<image class="flex-icon" :src="baseOssUrl+'icon/dw.png'" mode=""></image>
				</view>
			</view>
		</view>
		<!-- <view class="searchTab">
			<fui-tabs :tabs="tabs" @change="foodChange" color='#1D1D1D' size='28' selectedColor='#35743D' scale='1.1'
			 sliderBackground='#35743D' :short='false'></fui-tabs>
		</view> -->
		<view class="foodContent marin25" v-if="foodIndex == 0">
			<view class="food-litm " v-for="(item,index) in List" :key = 'index' @click="foodDetails(item)">
				<view class="food-top">
					<image :src="baseOssUrl2 +item.headPhoto " mode="" class="fd-img"></image>
					<view class="item-right">
						<view class="title-cont">
							{{item.title}}（{{item.address}}）
						</view>
						<view class="rate-cont">
							<view class="">
								<fui-rate :score=item.zf size='30' disabled></fui-rate>
								<text class="rate-text">{{item.zf?item.zf:" "}}</text>
								<text class="price-pop">¥{{item.pjxf}}/人</text>
							</view>
							<text class="volume">销量:{{item.xl}}</text>
						</view>
						<view class="addres-cont">
							<view class="addr-left">
								<!-- <text class="name1">饮品</text> -->
								<text>微山岛</text>
							</view>
							<view class="addr-right">
								<image class="ad-img" :src="baseOssUrl2 +'icon/address.png' " mode=""></image><text class="add-right">{{distance(latitude,longitude,item.latitude,item.longitude)}}km</text>
							</view>
						</view>
					</view>
				</view>
				<view class="food-bottom" v-if="item.catering.dj">
					<view class="itemb-left">
					</view>
					<view class="itemb-right">
						<view class="drink">
							<text class="dr-price">¥{{item.catering.dj}}</text>
							<!-- <text class="dr-discount">5.9折</text> -->
							<text class="original">¥{{item.catering.zj}}</text>
							<text class="dr-name">{{item.catering.title}}</text>
						</view>
						<!-- <view class="drink">
							<text class="dr-price">¥20</text>
							 <text>线上支付20元代金券</text>
						</view> -->
					</view>

				</view>
			</view>
		</view>
		<view class="" v-if="foodIndex == 1">
			111
		</view>
		<view class="" v-if="foodIndex == 2">
			1112
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		baseOssUrl,
		baseOssUrl2
	} from '@/common/settings';
	export default {
		//登录状态
		computed: mapState(['isLogin']),
		data() {
			return {
				List:[], //列表哦
				baseOssUrl: baseOssUrl,
				baseOssUrl2: baseOssUrl2,
				tabs: ['全部美食', '宴会聚请', '优惠套餐', '上榜好店'],
				foodIndex: '',
				rateNum: '' ,//评分
				page: 1,
				limit: 999,
				total: '',
				longitude: 117.2407, //经度
				latitude: 34.656701, //维度
				address: '',
				title:''
			}
		},
		onLoad() {
			
			this.getList()
			// if (!this.isLogin) {
			// 	uni.navigateTo({
			// 		url: '../login/index'
			// 	})
			// }
		},
		onShow() {
			console.log(uni.getStorageSync('longitude'),'ssssssssssssssssssssssss')
			this.longitude = uni.getStorageSync('longitude') || 117.2407
			this.latitude = uni.getStorageSync('latitude') || 34.656701
		},
		methods: {
			...mapMutations(['login', 'logout']),
			// 列表
			getList() { 
				this.$http.get(this.$httpApi.cyList, {
					data: {
						 page: this.page,
						 limit:this.limit,
						 title: this.title,
					}
				}).then(res => {
					if (res.code == 0) {
						this.List = res.page
						console.log(JSON.parse(res.page[0].catering.content))
					}
				})
			},
			// 去详情
			foodDetails(e){
				uni.navigateTo({
					url:'../foodDetails/index?id=' + e.id
				})
			},
			rateChange(e) {
				//返回评分 e.score
				console.log(e)
				this.rateNum = e.score
			},
			foodChange(val) {
				console.log("val", val)
				this.foodIndex = val.index
			},
			positionA() {
				let _this = this
				wx.chooseLocation({
					success(res) {
						_this.address = res.name
						_this.longitude = res.longitude || 117.2407 //经度
						_this.latitude = res.latitude || 34.656701 //维度
						uni.setStorageSync('longitude', _this.longitude)
						uni.setStorageSync('latitude', _this.latitude)
					},
					fail(res) {}
				})
			},
			goSearch(e) {
				console.log('eee',e)
				this.title = e.detail.value
				this.getList()
			// 	uni.navigateTo({
			// 		url: "/pages/searchList/index?num=2"
			// 	})
			},
			// 经纬度距离
			distance: function(la1, lo1, la2, lo2) {
				var La1 = la1 * Math.PI / 180.0;
				var La2 = la2 * Math.PI / 180.0;
				var La3 = La1 - La2;
				var Lb3 = lo1 * Math.PI / 180.0 - lo2 * Math.PI / 180.0;
				var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(La3 / 2), 2) + Math.cos(La1) * Math.cos(La2) * Math.pow(Math.sin(
					Lb3 / 2), 2)));
				s = s * 6378.137;
				s = Math.round(s * 10000) / 10000;
				s = s.toFixed(2);
				return s;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.foodList {
		height: 100%;

		.searchHeader {
			background: #FFFFFF;
		}

		.searchTab {
			background: #FFFFFF;
		}
		.b-line {
			border-bottom: 1px solid #FFFFFF;
		}
		
		.panel-content {
			display: flex;
			justify-content: space-between;
			align-items: center;
		
			.flex-box {
				display: flex;
				width: 100%;
				// margin: 5rpx 0 25rpx 15rpx;
				padding: 25rpx;
				justify-content: space-between;
				border-bottom: 1px solid #E0E0E0;
		
				.flex-name {
					color: #1D1D1D;
					font-size: 28rpx;
					display: flex;
					align-items: center;
		
					image {
						margin-left: 20rpx;
					}
		
					.add-name {
						font-weight: bold;
					}
		
				}
		
				.flex-jiant {
					width: 14rpx;
					height: 27rpx;
				}
		
				.flex-wz {
					display: flex;
					align-items: center;
					color: #35743D;
					font-size: 28rpx;
					border-left: 1px solid #E8E8E8;
					padding-left: 16rpx;
		
					image {
						margin-left: 20rpx;
					}
				}
		
				.flex-icon {
					width: 22rpx;
					height: 24rpx;
				}
		
				.name-search {
					color: #B4B4B4;
					font-size: 28rpx;
		
					.fangdj {
						width: 30rpx;
						height: 30rpx;
						margin: 0 10rpx 0 0 !important;
					}
				}
		
		
			}
		
			.flex-qj {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: #B4B4B4;
				font-size: 28rpx;
		
				image {
					width: 14rpx;
					height: 27rpx;
		
				}
			}
		
			.fui-custom__wrap {
				height: 100rpx;
				padding: 30rpx 0;
		
				.price-introduce {
					padding: 0 20rpx;
					display: flex;
					justify-content: flex-start;
					flex-wrap: wrap;
					margin-top: 20rpx;
		
					.price-items {
						float: left;
						background: #F8F8F8;
						height: 42rpx;
						font-size: 22rpx;
						color: #B4B4B4;
						line-height: 42rpx;
						margin: 8rpx 10rpx;
						padding: 14rpx 20rpx;
		
					}
		
					.active-rang {
						border: 1px solid #35743D;
					}
		
				}
			}
		
			.price-custom__wrap {
				.price-warp {
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 10rpx 0 38rpx 0;
					position: relative;
					font-weight: bold;
					color: #1D1D1D;
		
					image {
						position: absolute;
						right: 30rpx;
						width: 30rpx;
						height: 30rpx;
					}
				}
		
				.price-rang {
					display: flex;
					justify-content: space-between;
					padding: 20rpx 20rpx;
					color: #7E7E7E;
					font-size: 24rpx;
				}
		
				.progress-style {
					/deep/.fui-slider__wrap-outer {
						width: 90%;
						margin: 0 5%;
					}
		
				}
		
			}
		
			// 价格弹窗
			.price-popup {
				padding: 40rpx 0;
		
				.finish-btn {
					height: 100rpx;
					margin-top: 300rpx;
				}
			}
		
		
		
		}
		
		.panel-content1 {
			display: flex;
			justify-content: space-between;
			align-items: center;
		
			// 选择日历
			.timeHeader {
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 30rpx 0;
				position: relative;
		
				image {
					position: absolute;
					right: 45rpx;
					width: 30rpx;
					height: 30rpx;
				}
			}
		
			.flex-box {
				display: flex;
				width: 100%;
				padding: 25rpx;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1px solid #E0E0E0;
		
				.flex-ruzhu {
					color: #393939;
					font-size: 28rpx;
		
					.ruzhu-text {
						line-height: 28rpx;
					}
		
					.ruzhu-time {
						color: #2E2E2E;
						display: flex;
						align-items: center;
						line-height: 60rpx;
						font-weight: bold;
		
						.ruzhu-week {
							margin-left: 8rpx;
							color: #2E2E2E;
							font-weight: 400;
						}
					}
		
		
				}
		
				.flex-lidian {
					color: #393939;
					font-size: 28rpx;
		
					.lidian-text {
						line-height: 28rpx;
					}
		
					.lidian-time {
						color: #2E2E2E;
						display: flex;
						align-items: center;
						line-height: 60rpx;
						font-weight: bold;
		
						.lidian-week {
							margin-left: 8rpx;
							color: #2E2E2E;
							font-weight: 400;
						}
					}
				}
		
				.time-all {
					color: #2E2E2E;
					font-size: 28rpx;
					display: flex;
					align-items: center;
		
					.right-icon {
						margin-left: 10rpx;
						width: 9rpx !important;
						height: 17rpx !important;
					}
				}
		
				.flex-icon {
					width: 30rpx;
					height: 30rpx;
				}
			}
		}
		.foodContent {
			margin-top: 26rpx;
			.food-litm {
				background-color: #FFFFFF;
				border-radius: 16rpx;
				margin-bottom: 30rpx;
				padding: 24rpx; 
				.food-top {
					display: flex;

					.fd-img {
						width: 170rpx;
						height: 170rpx;
					}

					.item-right {
						width: 75%;
						margin-left: 24rpx;
						line-height: 40rpx;
						border-bottom: 1px solid #D9D9D9;

						.title-cont {
							font-size: 30rpx;
							font-weight: bold;
						}

						.rate-cont {
							color: #969696;
							font-size: 24rpx;
							display: flex;
							justify-content: space-between;

							.rate-text {
								color: #EDBD0B;
								margin: 0 16rpx;
							}
						}

						.addres-cont {
							display: flex;
							justify-content: space-between;
							font-size: 24rpx;
							color: #969696;

							.addr-left {
								.name1 {
									margin-right: 20rpx;
								}
							}

							.addr-right {
								display: flex;
								align-items: center;

								.ad-img {
									width: 20rpx;
									height: 25rpx;
								}
							}
						}
					}
				}

				.food-bottom { 
					margin-top: 25rpx;
					display: flex;
					justify-content: space-between;

					.itemb-left {}

					.itemb-right {
						width: 72%;
						// padding: 10rpx 0; 
						font-size: 24rpx;

						.drink {
							margin-bottom: 15rpx;
							line-height: 40rpx;
							.dr-price {
								font-size: 28rpx;
								color: #D93C3C;
								margin-right: 8rpx;
							}

							.dr-discount {
								color: #35743D;
								padding: 3rpx;
								border: 1px solid #35743D;
								margin-right: 8rpx;
							}

							.original {
								font-size: 26rpx;
								color: #B4B4B4;
								margin-right: 20rpx;
								text-decoration: line-through;
							}
						}
					}
				}


			}
		}
	}
</style>
